<template>
    <div class="app-container">
        <div style="width: 500px;">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="客户端公告" prop="sys_notice">
                            <el-input  v-model="form.sys_notice" placeholder="请输入客户端公告"/>
                        </el-form-item>
                    </el-col>
                  <el-col :span="24">
                    <el-form-item label="功能基础次数" prop="sys_notice">
                      <el-input  v-model="form.sys_used_basis_count" placeholder="请输入次数"/>
                    </el-form-item>
                  </el-col>
                </el-row>
<!--                <el-row>-->
<!--                    <el-col :span="24">-->
<!--                        <el-form-item label="售后/续费客服" prop="sys_post_sale_commissioner">-->
<!--                            <el-input  v-model="form.sys_post_sale_commissioner" placeholder="请输入售后/续费客服"/>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="24">-->
<!--                        <el-form-item label="JS网页售后群" prop="sys_post_sale_group_01">-->
<!--                            <el-input  v-model="form.sys_post_sale_group_01" placeholder="请输入JS网页售后群"/>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="24">-->
<!--                        <el-form-item label="JS插件售后群" prop="sys_post_sale_group_02">-->
<!--                            <el-input  v-model="form.sys_post_sale_group_02" placeholder="请输入JS插件售后群"/>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="24">-->
<!--                        <el-form-item label="魔词售后群" prop="sys_post_sale_group_03">-->
<!--                            <el-input  v-model="form.sys_post_sale_group_03" placeholder="请输入魔词售后群"/>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="24">-->
<!--                        <el-form-item label="交流群" prop="sys_post_sale_group_04">-->
<!--                            <el-input  v-model="form.sys_post_sale_group_04" placeholder="请输入交流群"/>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="售后/续费客服">
                            <el-upload
                                    class="image-upload avatar-uploader"
                                    action="#"
                                    :data="{
                                        key: 'sys_post_sale_group_qr'
                                    }"
                                    :http-request="upload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess">
                                <img class="avatar" v-if="form.sys_post_sale_group_qr" style="display: inline-block;width: 100%; height: 100%" :src="$src + '/' + form.sys_post_sale_group_qr" alt="">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                  <el-col :span="24">
                    <el-form-item label="售后客服(魔词网页版)">
                      <el-upload
                        class="image-upload avatar-uploader"
                        action="#"
                        :data="{
                                        key: 'sys_merchant_web_sale_qr'
                                    }"
                        :http-request="upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img class="avatar" v-if="form.sys_merchant_web_sale_qr" style="display: inline-block;width: 100%; height: 100%" :src="$src + '/' + form.sys_merchant_web_sale_qr" alt="">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                    <el-col :span="24">
                        <el-form-item label="QQ售后群">
                            <el-upload
                                    class="image-upload avatar-uploader"
                                    action="#"
                                    :data="{
                                        key: 'sys_communication_qq_group_qr'
                                    }"
                                    :http-request="upload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess">
                                <img class="avatar" v-if="form.sys_communication_qq_group_qr" style="display: inline-block;width: 100%; height: 100%" :src="$src + '/' + form.sys_communication_qq_group_qr" alt="">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="微信交流群">
                            <el-upload
                                    class="image-upload avatar-uploader"
                                    action="#"
                                    :data="{
                                        key: 'sys_communication_wechat_group_qr'
                                    }"
                                    :http-request="upload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess">
                                <img class="avatar" v-if="form.sys_communication_wechat_group_qr" style="display: inline-block;width: 100%; height: 100%" :src="$src + '/' + form.sys_communication_wechat_group_qr" alt="">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :span="24">-->
<!--                        <el-form-item label="客服微信二维码 ">-->
<!--                            <el-upload-->
<!--                                    class="image-upload avatar-uploader"-->
<!--                                    action="#"-->
<!--                                    :data="{-->
<!--                                        key: 'sys_post_sale_commissioner_wechat_qr'-->
<!--                                    }"-->
<!--                                    :http-request="upload"-->
<!--                                    :show-file-list="false"-->
<!--                                    :on-success="handleAvatarSuccess">-->
<!--                                <img class="avatar" v-if="form.sys_post_sale_commissioner_wechat_qr" style="display: inline-block;width: 100%; height: 100%" :src="$src + '/' + form.sys_post_sale_commissioner_wechat_qr" alt="">-->
<!--                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                            </el-upload>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                </el-row>
            </el-form>
            <div style="text-align: right">
                <el-button type="primary" @click="submitForm">保 存</el-button>
                <el-button @click="cancel">重 制</el-button>
            </div>
        </div>
    </div>
</template>

<script>
  import {
    delUser,
    resetUserPwd,
    updateUserCookie
  } from "@/api/system/user";
  import {getToken} from "@/utils/auth";
  import { get, update, upload } from "@/api/system/clientInfoManage"

  export default {
    name: "User",
    data() {
      return {
        // 遮罩层
        loading: false,
        // 部门树选项
        deptOptions: undefined,
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {
          sys_notice: '', //公告
          // sys_post_sale_commissioner: '', //售后
          // sys_post_sale_group_01: '', //售后群1
          // sys_post_sale_group_02: '', //售后群2
          // sys_post_sale_group_03: '', //售后群3
          // sys_post_sale_group_04: '',//售后群4
          sys_communication_wechat_group_qr: '',//微信交流群
          sys_communication_qq_group_qr: '',//qq交流群
          sys_post_sale_group_qr: '',//售后群
          sys_merchant_web_sale_qr:'',//魔词售后
          sys_post_sale_commissioner_wechat_qr: '',//充值客服
          sys_used_basis_count:'', //基础功能使用次数

        },
        // 表单校验
        rules: {
          username: [
            // {required: true, message: "请输入账户名", trigger: "blur"},
          ]
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.loading = true;
        let params = {}
        get(params).then(
          (resp) => {
            let { code, data } = resp
            if(code === 200) {
              for (let key in this.form) {
                if(this.form.hasOwnProperty(key)) {
                  let itemBean = data.find(item => item.key === key)
                  this.form[key] = (itemBean && itemBean.value) || ''
                }
              }
            }
            this.loading = false;
          }
        );
      },
      // 取消按钮
      cancel() {
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          sys_notice: '', //公告
          // sys_post_sale_commissioner: '', //售后
          // sys_post_sale_group_01: '', //售后群1
          // sys_post_sale_group_02: '', //售后群2
          // sys_post_sale_group_03: '', //售后群3
          // sys_post_sale_group_04: '',//售后群4
          // sys_communication_wechat_group_qr: '',//微信交流群
          // sys_communication_qq_group_qr: '',//qq交流群
          // sys_post_sale_group_qr: '',// 售后/续费客服
          // sys_post_sale_commissioner_wechat_qr: '',//充值客服
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            let params = {maintenanceInfoEntries: []}
            for (let key in this.form) {
              if(this.form.hasOwnProperty(key)) {
                params.maintenanceInfoEntries.push({key, value: this.form[key]})
              }
            }
              update(params).then((response) => {
                if (response.code === 200) {
                  this.msgSuccess("设置成功");
                  this.open = false;
                  this.getList();
                }
              });
          }
        });
      },
      upload(config) {
        const key = config.data.key
        const formData = new FormData()
        formData.append('file', config.file)
        formData.append('key', key)
        return upload(formData).then((res) => {
          this.form[key] = res.msg
          return res
        })
      },
      handleAvatarSuccess(response) {
        if (response.code !== 200) {
          this.$message({
            message: response.message || 'Error',
            type: 'error',
            duration: 5 * 1000
          })
          return false
        }
        // this.ruleForm.picUrl = response.data.downloadUrl
        this.$message.success('上传成功')
      },
    },
  };
</script>

<style>
    .image-upload {
        width: 180px;
        height: 180px;
    }
    .avatar-uploader .el-upload {
        width: 100%;
        height: 100%;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
